<template>
  <view class="container">
    <view class="tab-bar">
      <view v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ 'active': activeIndex === index }" @tap="switchTab(index)">
        {{ item }}
      </view>
    </view>
    <view v-if="activeIndex === 0">
      <view class="competition-one"  v-for="(item, i) in competitionSignupList" :key="i" >
      	<navigator class="competition-nav" :url="'/subpkg/competition_signup/competition_signup?id=' +item.id">
			<image  class="competition-img" :src="item.activityImg" ></image>
			<view  class="competition-name">
				<!-- 在图片上添加文字 -->
				<text  class="textTitle">
					{{item.activityTitle}}
				</text>
			</view>
		</navigator>
		<view class="competition-txt">
			<view class="competition-txt-left">
				
			</view>
			<view class="competition-txt-right">
				<view class="state" >状态：{{competitonState(item.status)}}</view>
				<view class="deadline">报名截止日期：{{item.activityApplicationEndTime}}</view>
			</view>
			
		</view>
      </view>
    </view>
    <view v-if="activeIndex === 1">
      <view class="competition-one"  v-for="(item, i) in competitionRunningList" :key="i" >
      	<navigator class="competition-nav" :url="'/subpkg/competition/competition?id=' +item.id">
			<image  class="competition-img" :src="item.activityImg" ></image>
			<view  class="competition-name">
				<!-- 在图片上添加文字 -->
				<text  class="textTitle">
					{{item.activityTitle}}
				</text>
			</view>
		</navigator>
      	<view class="competition-txt">
			<view class="competition-txt-left">
				
			</view>
			<view class="competition-txt-right">
				<view class="state" >状态：{{competitonState(item.status)}}</view>
				<view class="deadline">活动截止日期：{{item.activityEndTime}}</view>
			</view>
      	</view>
      </view>
    </view>
	<view v-if="activeIndex === 2">
	  <view class="competition-one"  v-for="(item, i) in competitionEndList" :key="i" >
	  	<navigator class="competition-nav" :url="'/subpkg/competition_end/competition_end?id=' +item.id">
			<image  class="competition-img" :src="item.activityImg" ></image>
			<view  class="competition-name">
				<!-- 在图片上添加文字 -->
				<text  class="textTitle">
					{{item.activityTitle}}
				</text>
			</view>
	  	</navigator>
	  	<view class="competition-txt">
			<view class="competition-txt-left">
				
			</view>
			<view class="competition-txt-right">
				<view class="state" >状态：{{competitonState(item.status)}}</view>
			</view>
	  	</view>
	  </view>
	</view>
    <!-- 更多内容视图 -->
  </view>
</template>
 
<script>
	
export default {
	//一些固定字段 0-报名中  1-待开始  2-进行中  3-已结束
	
  data() {
	 
    return {
      tabs: ['报名中', '进行中', '赛事回顾'],
      activeIndex: 0, // 当前激活的选项卡索引
	  //tab是至
	  competitionState: {
	    signuping: { name: '报名中', value: 0},
	    bagining:  { name: '待开始', value: 1 },
	    running: { name: '进行中', value: 2 },
	    end: { name: '已结束', value: 3}
	  },
	  // 请求报名中参数对象
	  querySignupingObj: {
	  	// 社团Id
	  	deptId: 0,
	  	// 1-活动 2-比赛
	  	activityType: 2,
		status: 0,
	  	// 页码值
	  	pageNo: 1,
	  	// 每页显示多少条数据
	  	pageSize: 10,
	  },
	  // 请求进行中参数对象
	  queryRunningObj: {
	  	// 社团Id
	  	deptId: 0,
	  	// 1-活动 2-比赛
	  	activityType: 2,
	  	status:  2,
	  	// 页码值
	  	pageNo: 1,
	  	// 每页显示多少条数据
	  	pageSize: 10,
	  },
	  // 请求进行中参数对象
	  queryEndObj: {
	  	// 社团Id
	  	deptId: 0,
	  	// 1-活动 2-比赛
	  	activityType: 2,
	  	status:  3,
	  	// 页码值
	  	pageNo: 1,
	  	// 每页显示多少条数据
	  	pageSize: 10,
	  },
	 
	  isloadingSignup: false,
	  isloadingRunning: false,
	  isloadingEnd: false,
	  
	  competitionSignupList: [],
	  competitionSignupNum: 0,
	  
	  competitionRunningList: [],
	  competitionRunningNum: 0,
	  
	  competitionEndList: [],
	  competitionEndNum: 0,
	  //当前跳到e: 0
	  competitionStatus: 0
    };
  },
  onLoad(options) {
  	this.baseUrl=uni.$http.baseUrl
  	this.getCompetitionSignupingList()
  },
  // 触底的事件
  onReachBottom() {
	  //0是第一个tab,报名中
	  if(this.activeIndex==0){
		  // 判断是否还有下一页数据
		  if (this.competitionSignupNum.length < this.querySignupingObj.pageSize)
		  return uni.$showMsg('数据加载完毕！')
		  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
		  if (this.isloading) return
		   // 让页码值自增 +1
		   this.querySignupingObj.pageNo += 1
		   // 重新获取列表数据
		   this.getCompetitionSignupingList()
	  }else if(this.activeIndex==1){
		  //进行中
		  // 判断是否还有下一页数据
		  if (this.competitionRunningList.length < this.queryRunningObj.pageSize)
		  return uni.$showMsg('数据加载完毕！')
		  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
		  if (this.isloading) return
		   // 让页码值自增 +1
		   this.queryRunningObj.pageNo += 1
		   // 重新获取列表数据
		   this.getCompetitionRunningList()
	  }else{
		  //赛事回顾
		  if (this.competitionEndList.length < this.queryEndObj.pageSize)
		  return uni.$showMsg('数据加载完毕！')
		  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
		  if (this.isloading) return
		   // 让页码值自增 +1
		   this.queryEndObj.pageNo += 1
		   // 重新获取列表数据
		   this.getCompetitionEndList()
	  }
  	
  },
 
  methods: {
    switchTab(index) {
      this.activeIndex = index;
	  if(index==0){
		  //切换tab时，重置参数
		  // 1. 重置关键数据
		  this.querySignupingObj.pageNo = 1
		  this.isloadingSignup = false
		  this.competitionSignupList = []
		  this.competitionSignupNum = 0
		  this.getCompetitionSignupingList()
	  }else if(index==1){
		  //  重置关键数据
		  this.queryRunningObj.pageNo = 1
		  this.isloadingRunning = false
		  this.competitionRunningList = []
		  this.competitionRunningNum = 0
		   this.getCompetitionRunningList()
	  }else{
		  //  重置关键数据
		  this.queryEndObj.pageNo = 1
		  this.isloadingEnd = false
		  this.competitionEndList = []
		  this.competitionEndNum = 0
		  this.getCompetitionEndList()
	  }
	  
    },
	//报名中
	async getCompetitionSignupingList(){
		this.isloadingSignup = true
		await uni.request({
		    url: this.baseUrl+'/api/activity/getActivityList', //仅为示例，并非真实接口地址。
		    data: {
		        // 学校Id
		        deptId: '',
				status: this.querySignupingObj.status,
				// 1-活动 2-比赛
				activityType:this.querySignupingObj.activityType,
		        // 页码值
		        pageNo: this.querySignupingObj.pageNo,
		        // 每页显示多少条数据
		        pageSize: this.querySignupingObj.pageSize,
		    },
			method: 'POST',
		    header: {
		          // "Content-Type": "application/json",
		          "Content-Type": "application/x-www-form-urlencoded"
		        },
		    success: (res) => {
				// ** 关闭节流阀
				this.isloadingSignup = false
				this.competitionSignupList=[...this.competitionSignupList, ...res.data.data] 
				//请求得到的社团数量
				this.competitionRunningNum=res.data.data.length
		    },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		});
	},
	//进行中·
	async getCompetitionRunningList(){
		this.isloadingRunning = true
		await uni.request({
		    url: this.baseUrl+'/api/activity/getActivityList', //仅为示例，并非真实接口地址。
		    data: {
		        // 学校Id
		        deptId: '',
				status: this.queryRunningObj.status,
				// 1-活动 2-比赛
				activityType:this.queryRunningObj.activityType,
		        // 页码值
		        pageNo: this.queryRunningObj.pageNo,
		        // 每页显示多少条数据
		        pageSize: this.queryRunningObj.pageSize,
		    },
			method: 'POST',
		    header: {
		          // "Content-Type": "application/json",
		          "Content-Type": "application/x-www-form-urlencoded"
		        },
		    success: (res) => {
				// ** 关闭节流阀
				this.isloadingRunning = false
				this.competitionRunningList=[...this.competitionRunningList, ...res.data.data] 
				//请求得到的社团数量
				this.competitionRunningNum=res.data.data.length
		    },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		});
	},
	//进行中·
	async getCompetitionEndList(){
		this.isloadingEnd = true
		await uni.request({
		    url: this.baseUrl+'/api/activity/getActivityList', //仅为示例，并非真实接口地址。
		    data: {
		        // 学校Id
		        deptId: '',
				status: this.queryEndObj.status,
				// 1-活动 2-比赛
				activityType:this.queryEndObj.activityType,
		        // 页码值
		        pageNo: this.queryEndObj.pageNo,
		        // 每页显示多少条数据
		        pageSize: this.queryEndObj.pageSize,
		    },
			method: 'POST',
		    header: {
		          // "Content-Type": "application/json",
		          "Content-Type": "application/x-www-form-urlencoded"
		        },
		    success: (res) => {
				// ** 关闭节流阀
				this.isloading = false
				this.competitionEndList=[...this.competitionEndList, ...res.data.data] 
				//请求得到的社团数量
				this.competitionEndNum=res.data.data.length
		    },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		});
	},
	
	competitonState(state){
		//0-报名中  1-待开始  2-进行中  3-已结束
		if(state==this.competitionState.signuping.value){
			return this.competitionState.signuping.name
		}else if(state==this.competitionState.bagining.value){
			return this.competitionState.bagining.name
		}else if(state==this.competitionState.running.value){
			return this.competitionState.running.name
		}else if(state==this.competitionState.end.value){
			return this.competitionState.end.name
		}
	}
  },
};
</script>
 
<style lang="scss">
.tab-bar {
  display: flex;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.active {
  color: #07a0ff;
  border-color: #07a0ff;
}
.competition-one{
    height: 180px;
	margin-bottom: 20px;
   .competition-nav{
	   position: relative;
	   height: 80%;
	   .competition-img{
		   width: 100%;
		   height: 100%;
	   }
	   .textTitle  {
	       position: absolute;
		   bottom: 20px;
	       color: #ffffff; /* 设置文字颜色 */
	       font-size: 15px; /* 设置文字大小 */
	       left: 3%; /* 水平居中 */
		   width: 70%;
		   mix-blend-mode: difference; /* 可选的混合模式，根据背景图片的颜色来调整 */
	   }
   }
   .competition-txt{
	   color: #858585;
	   display: flex;
	   justify-content: space-around;
	   .competition-txt-right{
		   margin-left: auto;
		   margin-right: 7px;
		   display: flex;
		   flex-direction: column;
	   }
   }
}


</style>